<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
  <head>
    <title>SuperChromePass</title>
    <style type="text/css">
      body{overflow:visible; width:170px;}
      *{margin:0 auto; padding:0; font-family:sans-serif; font-size:11px;}
      div{text-align:center; padding:2px;}
      table{border-collapse:collapse;}
      td{border-bottom:#ccc solid 1px; color:#666; padding:2px;}
      td:hover{color:blue; cursor:pointer;}
      .clickable{color:blue; cursor:pointer;}
      img{cursor:pointer;}
      h1,h3 {padding:2px;}
      input[type=password]{padding:2px; border:#ccc solid 1px;}
    </style>
<!----------------------------------------------------------------------------->
    <script type="text/javascript">
      var bg = chrome.extension.getBackgroundPage();

      function $(id) {return document.getElementById(id);}
      function isHidden(id) {return $(id).style.display=="none";}
      function setDisplay(id, value) {$(id).style.display = value;}
      function hide(id) {setDisplay(id, "none");}
      function show(id) {setDisplay(id, "block");}

      function clearTable(tbody) {
        while (tbody.rows.length> 0) {
          tbody.deleteRow(0);
        }
      }
      
      function createPassRow(tbody, index, pass) {
        var row = tbody.insertRow(tbody.rows.length);
        function addCell(html, title, onclick) {
          var cell = row.insertCell();
          cell.innerHTML = html;
          cell.title = title;
          cell.onclick = onclick;
          row.appendChild(cell);
        }
        addCell(index, null, null);
        addCell(pass, "Apply this password now.", function(){
          bg.updateStored(index);
          window.close();
        });
        /*
         *CAUTION: A possible practical security hole?
        addCell("<img src='show.png' alt='Show' />", "Show this Password.", function(){
          chrome.tabs.getSelected(null, function(tab) {
            window.close();
            var domain = bg.tabs[tab.id].domain;
            bg.alertbg(bg.generate(bg.passwords[index].master, domain));
          });
        });
        */
      }
      
      function disableActiveOnToggle() {
        var activetoggle = $("activetoggle");
        activetoggle.title = "Auto-fill password on current domain";
        activetoggle.src = "yes.png";
        activetoggle.onclick = enable;
      }

      function setup() {
        var domain = $('domain');
        chrome.tabs.getSelected(null, function(tab) {
          var bgtab = bg.domainByTab(tab);
          domain.innerHTML = bgtab.domain;
          domain.title = "Click to change the domain.";
          domain.onclick = function() {
            window.close();
            var newDomain = bg.promptbg("Change domain:", bgtab.domain);
            bgtab.domain = newDomain;
            bg.applyPassword(bgtab);
          };
        });

        var tbody = $('table').tBodies[0];
        clearTable(tbody);

        for (var i = 0; i < bg.passwords.length; i++) {
          createPassRow(tbody, i, bg.passwords[i].mask);
        }
        
        $("pass").focus();
        
        domain.style.color = "green";

        chrome.tabs.getSelected(null, function(tab) {
          if (bg.isInBlacklist(tab.url)) {
            disableActiveOnToggle();
            domain.style.color = "red";
          }
          var passId = bg.tabs[tab.id].passId;
          if(passId >= 0 && passId < tbody.rows.length) {
            tbody.rows[passId].cells[1].style.background = "yellow";
          }
        });
        return false;
      }

//-----------------------------------------------------------------------------//

      function saveOnEnter(event) {
        if (event.keyCode == 13) save();
      }

      function show() {
        var pass = $('pass').value;
        if(pass.length==0) return;
        if($('pass').value.length==0) return;
        chrome.tabs.getSelected(null, function(tab) {
          bg.alertbg(bg.generate(pass, tab.url));
        });
        window.close();
        return false;
      }

      function reset() {
        //NOTE: confirm popup always return false when called locally.
        //ISSUE: But now the popup closes before the confirm dialog does, and requires two click now.
        window.close();
        var count = bg.passwords.length;
        if(count!=0 && !bg.confirmbg("This will remove all ("+count+") stored passwords"
          + "\nfrom the session memory. Continue?")) return false;
        bg.reset();
        return false;
      }

      function save() {
        var pass = $('pass').value;
        if(pass.length==0) return;
        bg.update(pass);
        $('pass').value = "";
        setup();
        //NOTE: For now closing automatically, for the default case of one password
        window.close();
        return false;
      }

      function disable() {
        window.close();
        chrome.tabs.getSelected(null, function(tab) {
          if(bg.confirmbg("Disable this domain: "+$('domain').innerHTML+" ?"
            + "\nIf disabled, then passwords will not be auto filled on load, for this domain.")) {
            bg.addToBlacklist(tab.url);
          }
        });
        return false;
      }

      function enable() {
        chrome.tabs.getSelected(null, function(tab) {
          bg.removeFromBlacklist(tab.url);
          var bgtab = bg.tabs[tab.id];
          bg.applyPassword(bgtab);
        });
        window.close();
        return false;
      }
    </script>
  </head>
<!----------------------------------------------------------------------------->
  <body onload="setup();">
    <div>
      <h1>SuperGenPass Chrome Session (2.0)</h1>
      <br />
      <span id="domain" class="clickable" ></span>&nbsp;
      <img id="activetoggle" src='no.png' title="Don't auto-fill password on current domain" onclick="disable();" alt='Active Toggle' />
      <br />
      <br />
      <table border="0" cellspacing="0" cellpadding="0" width="90%" id="table"><tr><td></td></tr></table>
      <br />
      <div id="input">
        <h3>New Master Password</h3>
        <input type="password" id="pass" onkeydown="return saveOnEnter(event);" />
        <br />
        <br />
        <input type="submit" value="Save" title="Save it for the session (Enter key)" id="save" onclick="save();" />
        <input type="submit" value="Reset" title="Removes all stored passwords" id="reset" onclick="reset();" />
        <input type="submit" value="Show" title="Just show for copying (not stored)." id="show" onclick="show();" />
      </div>
    </div>
  </body>
</html>
<!----------------------------------------------------------------------------->
